<template>
  <div id="loader" class="lds-dual-ring centered">
    <a-modal v-model:visible="visible" title="欢迎来到空间导航实验" @ok="handleOk">
      <template #footer>
        <a-button key="submit" type="primary" @click="handleOk">开始</a-button>
      </template>
      <p>此阶段为测试环节，请您在60秒内尽快走到{{ nameList[level] }}。
      </p>
      <p>行走按键：wsad</p>
      <p>转向：鼠标滑动</p>
      <p>请点击“开始”按钮后开始测试。</p>
    </a-modal>
  </div>
  <div class="scene">
    <a-scene style="display: none;">

      <!-- Assets -->
      <a-assets>
        <img id="pavement" src="@/assets/test3/pavement.jpg" alt="pavement"/>
        <img id="brick-02" src="@/assets/test3/brick-02.jpg" alt="brick-02"/>
        <img id="ball" src="@/assets/test3/ball.jpg" alt="ball"/>
        <img id="red-carpet" src="@/assets/test3/red-carpet.jpg" alt="red-carpet"/>
        <img id="start" src="@/assets/test3/start.jpg" alt="start"/>
        <img id="finish" src="@/assets/test3/finish.jpg" alt="finish"/>
        <img id="pic1" src="@/assets/test3/pic1.jpeg" alt="pic1"/>
        <img id="pic2" src="@/assets/test3/pic2.jpeg" alt="pic2"/>
        <img id="pic3" src="@/assets/test3/pic3.jpg" alt="pic3"/>
        <img id="pic4" src="@/assets/test3/pic4.jpeg" alt="pic4"/>

      </a-assets>

      <!-- Environment -->
      <a-sky height="2048" color="#111" width="2048"></a-sky>
      <a-light type="ambient" color="#fff" intensity="0.8"></a-light>

      <a-plane material="src: #pavement; repeat: 50 50" static-body rotation="-90 0 0" height="100"
               width="100"></a-plane>

      <a-entity id="f" position="-8 0.5 22" scale="1 1 1"  geometry="primitive: box" material="color: red"
                static-body></a-entity>
      <a-entity id="d" position="24 0.5 -14" scale="1 1 1"  geometry="primitive: box" material="color: red"
                static-body></a-entity>
      <a-entity id="m" position="9 0.5 -9" scale="1 1 1"  geometry="primitive: box" material="color: red"
                static-body></a-entity>
      <a-entity id="s" position="9 0.5 -20" scale="1 1 1"  geometry="primitive: box" material="color: red"
                static-body></a-entity>
      <a-entity id="l" position="2 0.5 22" scale="1 1 1"  geometry="primitive: box" material="color: red"
                static-body></a-entity>

      <!-- Player -->
      <a-entity id="player"  camera="user-height: 1.7" universal-controls kinematic-body listener
                player>
      </a-entity>

      <!-- Maze -->
      <a-entity id="maze" mazify></a-entity>
    </a-scene>
  </div>

  <!-- The Game Menu Modal -->
  <div class="clock" v-show="showTimer">还剩{{ timer }}秒</div>

</template>

<script>
import {useRouter} from "vue-router";
import {ref} from "vue";
import {player} from "@/app/test3/component/player";
import {mazify} from "@/app/test3/component/mazify";
import {postAnswer} from "@/utils/api";

export default ({
  setup() {
    const timer = ref(60);
    const showTimer = ref(false);
    const level = ref(0);
    const idList = ref(["#f", "#d", "#m", "#s", "#l"]);
    const nameList = ref(["热气球", "火堆", "茶杯", "蜡烛", "树"]);
    const obList = ref([{ x: -7, y: 0.5, z: 22 },{ x: 23, y: 0.5, z: -14 },{ x: 8, y: 0.5, z: -9 },{ x: 7, y: 0.5, z: -20 },{ x: 0, y: 0.5, z: 20 }]);

    const times = () => {
      setInterval(() => {
        if (timer.value === 0) {
          nextTest("0");
        } else {
          timer.value--;
        }
      }, 1000);
    }
    const benginTimer = () => {
      showTimer.value = true;
      times();
    };
    const visible = ref(true);
    const router = useRouter();
    const showModal = () => {
      visible.value = true;
    };
    const nextTest = (flag) => {
      //todo postAnswer
      postAnswer([{"token": "", "answer": flag, "delta": 60-timer.value}],"test3",level.value)
      timer.value = null;
      level.value++;
      if (level.value === 5) {
        router.push("/end")
        return
      }
      // const sceneEl = document.querySelector('a-scene');
      // sceneEl.exitVR();
      visible.value = true;
    };
    // 开始
    const handleOk = () => {
      visible.value = false;
      timer.value = 60;
      const target = document.querySelector(idList.value[level.value]);
      const collide = (evt) => {
        if (evt.detail.body.el.id !== undefined && evt.detail.body.el.id === "player") {
          nextTest("1");
          target.removeEventListener('collide',collide)
        }
      };
      target.addEventListener('collide', collide);
      benginTimer();
    };

    return {
      timer,
      times,
      showTimer,
      level,
      nextTest,
      obList,
      idList,
      nameList,
      visible,
      showModal,
      handleOk,
    };
  },
});

</script>

<style scoped>

.clock {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding: 10px; /* Location of the box */
  float: left;
  color: #42aaee;
}

.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 6px solid #42aaee;
  border-color: #42aaee transparent #42aaee transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.centered {
  position: fixed; /* or absolute */
  top: calc(50% - 64px);
  left: calc(50% - 64px);
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

</style>
